<template>
    <div class="page-wrap">
        <div class="page-content company-page">
            <div class="img-header">
                <div class="class-title-wrap">
                    <div class="class-title">
                        <div class="class-title-all" :class="{'active':allClassText}" @click="clickClassText('all')">单位人员</div>
                    </div>
                    <div style="margin-left: 50px" class="class-title">
                        <div class="class-title-all" :class="{'active':myClassText}" @click="clickClassText('my')">实验组</div>
                    </div>
                </div>
                <div v-show="allClassText" class="member-filter-wrap">
                    <div style="height: 32px;">
                        <Checkbox v-model="selectAllUser" style="margin-top:8px; width: 66px;"
                                  @on-change="handleCheckAllUser"
                                  title="仅选择当前页数据">选择所有</Checkbox>
                    </div>
                	<Button ghost style="height: 32px;margin-right: 15px" type="primary" icon="ios-cloud-upload-outline" @click="exportUsers">导出用户</Button>
                	<Tooltip max-width="200" content="导入用户会忽略重名和非课件人员的数据，导入的用户未填写登录密码时会被设置为初始密码(Userpw_1234)">
                	<Upload ref="upload"
                             :action="uploadAction"
                             :show-upload-list="false"
                             :format="['xlsx']"
                             :on-format-error="handleFormatError"
                             :on-success="getImageUrl"
                             :on-progress="handleProgress"
                             :before-upload="handleBeforeUpload"
                             :headers="uploadHeader">
                        <Button ghost style="height: 32px;" type="primary" :disabled="uploadList.length > 0">
                        	<div v-if="uploadList.length == 0">
                        		<Icon type="ios-cloud-upload-outline"></Icon>
                       	    	<span>导入操作员</span>
                        	</div>
                       	    <div class="demo-upload-list" v-for="item in uploadList">
										        <Progress v-if="item.showProgress" :percent="item.percentage" hide-info style="width:100px"></Progress>
										    </div>
                        </Button>
                        <!--<p style="position:absolute;color:#f90；">导入用户会忽略重名和非试验人员的数据，所有导入的用户密码都为初始密码</p>-->
                    </Upload>
                    </Tooltip>
                    <Button ghost style="height: 32px;margin-left: 15px" type="primary" icon="ios-cloud-upload-outline"><a href="static/用户模板.xlsx" download="用户模板.xlsx" class="downloadUrl">下载导入操作员模板</a></Button>
                    <Button v-if="selectUsers.length == 0" ghost style="height: 32px;margin-left: 15px" type="primary" @click="isDeleteList">批量删除</Button>
                    <Poptip
                        v-if="selectUsers.length != 0"
                        confirm
                        title="确定删除单位人员?"
                        @on-ok="deleteList"
                        @on-cancel="">
                        <Button ghost style="height: 32px;margin-left: 15px" type="primary">批量删除</Button>
                    </Poptip>
                    <Button ghost style="height: 32px;margin-left: 15px" type="primary" class="md-add-jh" @click="creatGroupMemberBtn" v-show="!isRootDesigner">创建操作员</Button>
                    <Button ghost style="height: 32px;margin-left: 15px" type="primary" class="md-add-jh" @click="creatDesignBtn" v-show="isRootDesigner">创建者员</Button>
                    <Divider type="vertical" style="margin: 10px 0px 10px 10px;"/>
					<div style="height: 32px;line-height: 32px;;margin-left: 15px">
                        <Checkbox v-model="createByMe" @on-change="searchCreatedByMe" style="width: 66px;">由我创建
                        </Checkbox>
                    </div>
                    <i-select v-model="filterRootOrDesi" placeholder="类型" style="width: 150px;margin-left: 15px" @on-change="changeUserType">
                        <Option value="all">全部类型</Option>
                        <Option value="leader">单位管理员</Option>
                        <Option value="member">单位设计师</Option>
						
                        <!--<Option value="evaluator">评估人员</Option>-->
                        <Option v-if="isRetainer" value="referee">裁判人员</Option>
                        <Option value="experimenter">操作员</Option>
                    </i-select>
                    <Input v-model.trim="searchComMemInput" placeholder="用户名" clearable @on-change="searchComMem" style="width: 180px;margin-left: 15px"/>
                    <Input v-model.trim="nickname" placeholder="昵称" clearable @on-change="searchComMem" style="width: 180px;margin-left: 15px"/>
                    <Button class="header-btn" type="primary" ghost style="height: 32px;margin-left: 5px;" @click="refreshCompany(true)"><i class="el-icon-refresh-right" /></Button>

				</div>
                <div v-show="myClassText" class="member-filter-wrap">
                	<Checkbox v-model="selectAllGroup" style="margin-top:8px;" @on-change="handleCheckAllGroup" title="仅选择当前页数据">选择所有</Checkbox>
                	<Button ghost style="height: 32px;margin-left: 15px" type="primary" icon="ios-cloud-upload-outline" @click="exportGroups">导出实验组</Button>
                    <Upload ref="upload"
                             :action="uploadGroupAction"
                             :show-upload-list="false"
                             :format="['xlsx']"
                             :on-format-error="handleFormatError"
                             :on-success="getImageUrl"
                             :on-progress="handleProgress"
                             :before-upload="handleBeforeUpload"
                             :headers="uploadHeader">
                        <Button ghost style="height: 32px;margin-left: 15px" type="primary" :disabled="uploadList.length > 0">
                        	<div v-if="uploadList.length == 0">
                        		<Icon type="ios-cloud-upload-outline"></Icon>
                       	    	<span>导入实验组</span>
                        	</div>
                       	    <div class="demo-upload-list" v-for="item in uploadList">
						        <Progress v-if="item.showProgress" :percent="item.percentage" hide-info style="width:100px"></Progress>
						    </div>
                        </Button>
                    </Upload>
                    <Button v-if="selectGroups.length == 0" ghost style="height: 32px;margin-left: 15px" type="primary" @click="isDdeleteGroups">批量删除</Button>
                    <Poptip
                    v-if="selectGroups.length != 0"
                        confirm
                        title="确定删除实验组?"
                        @on-ok="deleteGroups"
                        @on-cancel="">
                        <Button ghost style="height: 32px;margin-left: 15px" type="primary">批量删除</Button>
                    </Poptip>
                    <Button ghost style="height: 32px;margin-left: 15px" type="primary" icon="ios-cloud-upload-outline"><a href="static/experimental_group_template.xlsx" download="experimental_group_template.xlsx" class="downloadUrl">下载导入实验组模板</a></Button>
                    <Button ghost style="height: 32px;margin-left: 15px" type="primary" class="md-add-jh" @click="creatGroupBtn">创建实验组</Button>
                    <i-select clearable v-model="filterExpGroup" placeholder="实验组类别" style="width: 150px;margin-left: 15px" @on-change="changeExpGroupState">
                        <Option value="share">分享给我</Option>
                        <Option value="private">由我创建</Option>
                    </i-select>
                    <Input v-model.trim="searchExpGroupInput" placeholder="实验组名称" clearable @on-change="searchExpGroup" style="width: 180px;margin-left: 15px"/>
                    <Button class="header-btn" type="primary" ghost style="height: 32px;margin-left: 5px;" @click="refreshExpGroup()"><i class="el-icon-refresh-right" /></Button>
                    
                </div>
            </div>
            <div class="table-wrap">
                <div v-show="allClassText" style="height: 100%;">
                	<div style="padding:15px 15px 0;" v-if="selectUsers.length > 0">
		            	<Tag color="purple" v-for="user in selectUsers" :key="user.id">{{user.nickname}}</Tag>
		            </div>
                    <!-- 新列表 -->
                    <div v-show="showMembersData">
                        <div class="content-wrap">
                            <div class="project-item" v-for="(item,key) in userGroupList" :key="key">
                                <div class="item-first-line">
                                    <div class="project-name-state">
                                        <div class="project-status-text">
                                        	<p  style="margin-right:8px;width: 20px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
                                                <Checkbox v-model="item._checked" @on-change="checkSingleUser($event,item)"></Checkbox>
                                            </p>
                                            <p  style="margin-right:8px;" class="display-flex">
                                                <span>{{handleMemIndex(key)}}.用户名：</span>
                                                <Tooltip :content="item.username" placement="top-start" :max-width="400">
                                                    <span style="width: 200px;" class="text-ellipsis">{{item.username}}</span>
                                                </Tooltip>
                                            </p>
                                            <p  style="margin-right:8px;" class="display-flex">
                                                <span>昵称：</span>
                                                <Tooltip :content="item.nickname" placement="top-start" :max-width="400">
                                                    <span
                                                            v-if="!((item.creator !== USER_ID && !isRootDesigner) || item.role === 'leader')"
                                                            @click="modifyNicknameBtn(item)"
                                                            class="text-ellipsis"
                                                            style="color:#2d8cf0;cursor: pointer;width: 200px;">{{item.nickname}}</span>
                                                    <span v-else style="width: 200px;" class="text-ellipsis">{{item.nickname}}</span>
                                                </Tooltip>
                                                <!-- <Icon title="修改昵称" @click="modifyNicknameBtn(item)" type="ios-create-outline" class="setname" /> -->
                                            </p>
                                            <p  style="margin-right:8px;">
                                                <span>单位：</span>
                                                <span>{{item.companyName}}</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="btn-icon-wrap">
                                    	<img :src="setModifyNicknameImgSrc(item)" class="click-icon" alt="Modify" title="修改密码" :style='setIsClickModify(item)' @click="changePass(item)">
                                        <Poptip
                                            transfer confirm title="确定要重置密码吗？" placement="left"
                                            @on-ok="resetPwd(item)" :style="setIsClick(item)">
                                            <img :src="resetResetImg(item)" class="click-icon" alt="Reset" title="重置密码" >
                                        </Poptip>
                                        <Poptip
                                            transfer confirm title="确定要移除该成员吗？" placement="left"
                                            @on-ok="delGroupMember(item)" :style="setIsClick(item)">
                                            <img :src="setDelImgSrc(item)" class="click-icon" alt="Del" title="移除" >
                                        </Poptip>
                                    </div>
                                </div>
                                <div class="project-other-info">
                                    <p  style="margin-right:8px;" class="display-flex">
                                        <span>创建者：</span>
                                        <Tooltip :content="item.creatorName" placement="top-start" :max-width="400">
                                            <span style="width: 120px;" class="text-ellipsis">{{item.creatorName}}</span>
                                        </Tooltip>
                                    </p>

                                    <p  style="margin-right:8px;width: 200px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
                                        <span>类型：</span>
                                        <span>{{handleUserType(item)}}</span>
                                    </p>
                                    <!-- <p  style="margin-right:8px;width: 120px;">
                                        <span>角色：</span>
                                        <span>{{item.role}}</span>
                                    </p> -->
                                    <p  style="margin-right:8px;width: 120px;">
                                        <span>是否在线：</span>
                                        <span :style="{color:isOnline(item.online).color}">{{isOnline(item.online).text}}</span>
                                    </p>
                                    <p style="margin-right:8px;">
                                        <span>创建时间：</span>
                                        <span>{{item.created}}</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div style="display: flex;justify-content: center;margin: 15px 0">
                            <Page :total=userGroupTotal :page-size="groupPageSize" :current="groupPage" show-total 
                            show-elevator
                            show-elevator @on-change="userGroupOnChange"/>
                        </div>
                    </div>
                    <div v-show="showMembersImg" class="defGraphWrap">
                        <div class="defGraph"></div>
                        <div class="graphText">暂无信息</div>
                    </div>
                </div>
                <div v-show="myClassText" style="height: 100%;">
                	<div style="padding:15px 15px 0;" v-if="selectGroups.length > 0">
		            	<Tag color="purple" v-for="group in selectGroups" :key="group.id">{{group.name}}</Tag>
		            </div>
                    <!-- 新列表 -->
                    <div v-show="showGroupData">
                        <div class="content-wrap">
                            <div class="project-item" v-for="(item,key) in ExperimentalUserGroupList" :key="key">
                                <div class="item-first-line">
                                	<!--<p  style="margin-right:8px;width: 20px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
                                        <Checkbox v-model="item._checked" @on-change="checkSingleGroup($event,item)"></Checkbox>
                                    </p>-->
                                    <div class="project-name-state">
                                    	<Checkbox
                                                v-model="item._checked"
                                                @on-change="checkSingleGroup($event,item)"
                                                class="project-name-state-checkbox"></Checkbox>
                                        <div class="project-name display-flex">{{handleGroupIndex(key)}}.
                                            <Tooltip :content="item.name" placement="top-start" :max-width="400">
                                                <span style="width: 200px;" class="text-ellipsis">{{item.name}}</span>
                                            </Tooltip>
                                        </div>
                                    </div>
                                    <div class="btn-icon-wrap">
                                        <Poptip
                                            transfer confirm title="确定要解散吗？" placement="left"
                                            @on-ok="delGroup(item)" :style="setIsClick(item)">
                                            <img :src="setDelImgSrc(item)" class="click-icon" alt="Del" title="解散" >
                                        </Poptip>
                                        <img :src="setImgSrc(item)" class="click-icon" :style="setIsClick(item)" alt="Reset" title="修改"  @click="madifyGroup(item)">
                                        <img :src="invitaIcon" class="click-icon" alt="Reset" title="邀请" @click="createdInvitation(item)">
                                        <img :src="memsIcon" class="click-icon" alt="Reset" title="成员管理"  @click="membersManage(item)">
                                    </div>
                                </div>
                                <div class="project-other-info">
                                    <p  style="margin-right:8px;" class="display-flex">
                                        <span>创建者：</span>
                                        <Tooltip :content="item.creatorName" placement="top-start" :max-width="400">
                                            <span style="width: 120px;" class="text-ellipsis">{{item.creatorName}}</span>
                                        </Tooltip>
                                    </p>
                                    <p style="margin-right:22px;">
                                        <span>创建时间：</span>
                                        <span>{{item.created}}</span>
                                    </p>
                                    <p  style="margin-right:22px;">
                                        <span>可见范围：</span>
                                        <span :style="{color:setVisibility(item.visibility).color}">{{setVisibility(item.visibility).text}}</span>
                                    </p>
                                    <p  style="margin-right:8px;">
                                        <span>申请人：</span>
                                        <div :style="handleApplyStyle(item.applyCount)" @click="showApplyList(item)">{{item.applyCount>0?item.applyCount:'暂无'}}</div>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div style="display: flex;justify-content: center;margin: 15px 0">
                            <Page :total=expGroupCount :page-size="expPageSize"
                             :current="expPage" show-total show-elevator @on-change="expGroupOnChange"/>
                        </div>
                    </div>
                    <div v-show="showGroupImg" class="defGraphWrap">
                        <div class="defGraph"></div>
                        <div class="graphText">暂无信息</div>
                    </div>
                </div>
            </div>
        </div>

        <!--单位管理员操作-->
        <Modal
                v-model="rootCreatedExpMemberModal"
                :mask-closable="false"
                width="500"
                :footer-hide="true"
                title="创建者员">
            <Form ref="rootCreatedExpMemberModel" :model="rootCreatedExpMemberModel" :rules="rootCreatedExpMemberRuleValidate" :label-width="80" >
                <FormItem label="用户名" prop="username">
                    <Input v-model.trim="rootCreatedExpMemberModel.username" placeholder="用户名"></Input>
                </FormItem>
                <FormItem label="密码" prop="password">
                    <Input v-model.trim="rootCreatedExpMemberModel.password" type="password" placeholder="密码"></Input>
                </FormItem>
                <FormItem label="昵称" prop="nickname">
                    <Input v-model.trim="rootCreatedExpMemberModel.nickname" placeholder="昵称"></Input>
                </FormItem>
                <FormItem label="类型" prop="type">
                    <Select filterable v-model="rootCreatedExpMemberModel.type" @on-change="changeCreatType" placeholder="select">
                        <Option value="designer">设计师</Option>
						
                        <!--<Option value="evaluator">评估人员</Option>-->
                        <Option v-if="isRetainer" value="referee">裁判</Option>
                        <Option value="experimenter">操作员</Option>
                    </Select>
                </FormItem>
                <FormItem label="课件用户组" v-show="showExpGroupSelect">
                    <Select filterable v-model="selectGroup" placeholder="选择" filterable>
                        <Option v-for="(item,index) in  allGroupList" :value="item.id" :key="index" :title="item.name">{{item.name}}</Option>
                    </Select>
                </FormItem>
                <FormItem label="邮箱" prop="email">
                    <Input v-model.trim="rootCreatedExpMemberModel.email" placeholder="邮箱"></Input>
                </FormItem>
                <FormItem label="手机号" prop="mobile">
                    <Input v-model.trim="rootCreatedExpMemberModel.mobile" placeholder="手机号"></Input>
                </FormItem>
                <FormItem label="描述" prop="description">
                    <Input v-model.trim="rootCreatedExpMemberModel.description" type="textarea" :maxlength="200" :autosize="{minRows: 2,maxRows: 5}" placeholder="描述"></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="rootCreatedExpMemberSubmit('rootCreatedExpMemberModel')">确定</Button>
                    <Button @click="rootCreatedExpMemberReset('rootCreatedExpMemberModel')" style="margin-left: 8px">重置</Button>
                </FormItem>
            </Form>
        </Modal>
        <!--单位设计师创建操作员-->
        <Modal
                v-model="createdExpMemberModal"
                :mask-closable="false"
                width="500"
                :footer-hide="true"
                title="创建操作员">
            <Form ref="createdExpMemberModel" :model="createdExpMemberModel" :rules="createdExpMemberRuleValidate" :label-width="80">
                <FormItem label="用户名" prop="username">
                    <Input v-model.trim="createdExpMemberModel.username" placeholder="用户名"></Input>
                </FormItem>
                <FormItem label="密码" prop="password">
                    <Input v-model.trim="createdExpMemberModel.password" type="password" placeholder="密码"></Input>
                </FormItem>
                <FormItem label="昵称" prop="nickname">
                    <Input v-model.trim="createdExpMemberModel.nickname" placeholder="昵称"></Input>
                </FormItem>
                <FormItem label="实验组">
                    <Select filterable v-model="selectGroup" placeholder="选择" filterable>
                        <Option v-for="(item,index) in  allGroupList" :value="item.id" :key="index" :title="item.name">{{item.name}}</Option>
                    </Select>
                </FormItem>
                <FormItem label="邮箱" prop="email">
                    <Input v-model.trim="createdExpMemberModel.email" placeholder="邮箱"></Input>
                </FormItem>
                <FormItem label="手机号" prop="mobile">
                    <Input v-model.trim="createdExpMemberModel.mobile" placeholder="手机号"></Input>
                </FormItem>
                <FormItem label="描述" prop="description">
                    <Input v-model.trim="createdExpMemberModel.description" type="textarea" :maxlength="200" :autosize="{minRows: 2,maxRows: 5}" placeholder="描述"></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="createdExpMemberSubmit('createdExpMemberModel')">确定</Button>
                    <Button @click="createdExpMemberReset('createdExpMemberModel')" style="margin-left: 8px">重置</Button>
                </FormItem>
            </Form>
        </Modal>
        <!-- 创建/修改 实验组-->
        <Modal
                v-model="reGroupModal"
                :mask-closable="false"
                width="500"
                :footer-hide="true"
                :title="groupText">
            <Form ref="formItem" :model="formItem" :rules="formItemRuleValidate" :label-width="80">
                <FormItem label="名称" prop="name">
                    <Input v-model.trim="formItem.name" placeholder="名称"></Input>
                </FormItem>
                <FormItem label="可见范围" prop="visibility">
                    <RadioGroup v-model="formItem.visibility">
                        <Radio label="share">单位</Radio>
                        <Radio label="private">个人</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="描述" prop="description">
                    <Input v-model.trim="formItem.description" type="textarea" :maxlength="200" :autosize="{minRows: 2,maxRows: 5}" placeholder="描述"></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="formBtn('formItem')" :loading="loading">确定</Button>
                    <Button @click="exGroupHandleReset('formItem')" style="margin-left: 8px">重置</Button>
                </FormItem>
            </Form>
        </Modal>
        <!--生成邀请链接-->
        <Modal
                v-model="modal3"
                :mask-closable="false"
                width="500" :footer-hide="true"
                title="邀请链接">
            <Form :model="teamLink" :label-width="80">
                <FormItem label="链接">
                    <input id='input_url' v-model='teamLink.name' style='opacity: 0;position: absolute;' type="text">
                    <Input type="text" v-model="teamLink.name" disabled></Input>
                    <Button  style="margin-top: 15px" class="add-member" type="primary"
                             @click="copyTeamLink">复制链接</Button>
                </FormItem>
            </Form>
        </Modal>
        <!--实验组的申请列表-->
        <Modal :closable="false" :mask-closable="false" width="800" v-model="applyModal" :title="applyGroupName">
            <div>
                <Table :columns="applyGroupCol" :data="applyList"></Table>
            </div>
        </Modal>
        <Modal
                v-model="modifyNicknameModal"
                :mask-closable="false"
                width="500"
                title="修改昵称"
                footer-hide
            >
            <Form ref="modifyNicknameForm" :model="modifyNicknameForm" :rules="rootCreatedExpMemberRuleValidate" :label-width="80" >
                <FormItem label="昵称" prop="nickname">
                    <Input v-model.trim="modifyNicknameForm.nickname" placeholder="昵称"></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="reNickname()" :loading="loading">确定</Button>
                    <!--<Button @click="modifyNicknameForm.nickname == ''" style="margin-left: 8px">重置</Button>-->
                </FormItem>
            </Form>
        </Modal>
        <!-- 修改密码 -->
        <Modal
            v-model="showChangePass"
            title="修改密码"
            width="400"
            class-name="vertical-center-modal"
            >
            <div>
                <Form ref="newPassword" :model="newPassword" :rules="newPasswordRule">
                    <FormItem prop="Password">
                        <Input type="text" placeholder="请输入新密码" v-model.trim="newPassword.Password" clearable></Input>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer">
		    	<Button type="default" @click="showChangePass = false;newPassword.Password = ''">取消</Button>
	            <Button :disabled="!(/^(?!.*\s)(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[\W_]).{8,20}$/.test(newPassword.Password))" type="primary" @click="changePassword('newPassword')">确定</Button>
	        </div>
        </Modal>
        <Modal :mask-closable="false" width="800" footer-hide v-model="abnormalUserModal" title="导入异常用户列表">
            <div>
                <Table :columns="abnormalUserCol" :data="abnormalUserList"></Table>
            </div>
        </Modal>
    </div>
</template>
<script>
    const YXURL_Comper = 'https://130.2.1.33'
    const YXURL_Train = 'http://130.2.1.31'
    import $ from 'jquery'
    import encryption from '@/libs/encryption.js'
    import {getCompanyData,getExperiData,verifyUserName,createUser,delCompanyMember,creatGroup,reGroup,
        delGroup,creatInvaita,checkApply,agreeApply,refuseApply,resetPwd,getPwdBlackList,exportUsers,exportGroups,deleteListUser,deleteGroups} from '@/api/company.js'
    import {modifyCompanyUserInfo,changePassword} from '@/api/user.js'
    import {sendToUser} from '@/api/boardcast_new.js'
    export default {
        components:{},
        data () {
            let regUsername = /^[0-9A-Za-z_]{5,18}$/;   // 账号是数字 字母 或者下划线的组合
            let regPasswd = /^(?!.*\s)(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[\W_]).{8,16}$/;     // 密码必须包含大小写字母、数字和特殊字符，长度为8-16
            const validateUsername = (rule, value, callback) => {
                if(regUsername.test(value)){
                    callback();
                }else {
                    callback(new Error('请输入长度为5-18位的账号,可以使用数字、字母或者下划线'));
                }
            };
            const validatePass = (rule, value, callback) => {
                if(regPasswd.test(value)){
                    callback();
                }else {
                    callback(new Error('密码必须包含大写字母，小写字母，数字和特殊字符，长度为8-16位'));
                }
            };
            const validateNickname = (rule, value, callback) => {
                if(value.length < 1){
                    callback(new Error('昵称不能为空'));
                }else if(value.length > 32){
                    callback(new Error('昵称长度不能超过32位'));
                }else {
                    callback();
                }
            };
            const validateGroupname = (rule, value, callback)=>{
                if(value.length < 1){
                    callback(new Error('实验组名称不能为空'));
                }else if(value.length > 32){
                    callback(new Error('实验组名称长度不能超过32'));
                }else if(value.indexOf('@') > -1){
                    callback(new Error('实验组名称不能使用@符'));
                }else{
                    callback();
                }
            }
            return {
                userForm:{
                    id:""
                },
                newPassword:{
                    Password:''
                },
                showChangePass:false,
                // 用户信息
                USER_ID:'',
                isRootDesigner:'',
                // 页面设置
                fullHeight: document.documentElement.clientHeight,
                fullWidth: document.documentElement.clientWidth,
                setTableHei:'auto',
                // 头部切换样式
                allClassLine:true,
                allClassText:true,
                myClassText:false,
                myClassLine:false,
                // 表格显示
                showMembersData:false,
                showGroupData:false,
                showMembersImg:false,
                showGroupImg:false,
                // 单位
                userGroupTotal:0,
                groupPage:1,
                groupPageSize:12,
                myUserGroupName:'',
                myUserTeamGroupLoading:false,
                userGroupList:[],
                searchComMemInput:'',
                nickname:'',
                filterRootOrDesi:'all',
                userRole:'',
                userType:'',
                filterMyCreatExpMem:'all',
                createByMe:false,
                // 单位管理员操作 创建组或者成员
                rootCreatedExpMemberModal:false,
                rootCreatedExpMemberModel:{
                    username:'',
                    password:'',
                    type:'designer',
                    online:'false',
                    nickname:'',
                    mobile:'',
                    email:'',
                    description:'',
                },
                rootCreatedExpMemberRuleValidate:{
                    username: [
                        { required: true,validator: validateUsername, trigger: 'change' },
                        { type: 'string', min: 5, max:18, message: '请输入长度为5-18位的账号', trigger: 'change' }
                    ],
                    password: [
                        { required: true,validator: validatePass, trigger: 'change' },
                        { type: 'string',min: 8, max:20, message: '密码不能为空', trigger: 'change' }
                    ],
                    nickname: [
                        { required: true,validator: validateNickname, trigger: 'change' },
                        { type: 'string', min: 1,max: 32, message: '昵称长度为1—32', trigger: 'change' }
                    ],
                    description:[
                        { max: 200, message: '说明不能超过200个字母', trigger: 'change' },
                    ],
                },
                selectGroup:'',
                showExpGroupSelect:false,
                // 设计师创建操作员
                createdExpMemberModal:false,
                createdExpMemberModel:{
                    username:'',
                    password:'',
                    type:'experimenter',
                    online:'false',
                    nickname:'',
                    mobile:'',
                    email:'',
                    description:'',
                },
                newPasswordRule:{
                    Password: [
                        { required: true,validator: validatePass, trigger: 'change' },
                        { type: 'string',min: 8, max:20, message: '密码不能为空', trigger: 'change' }
                    ],
                },
                createdExpMemberRuleValidate:{
                    username: [
                        { required: true,validator: validateUsername, trigger: 'change' },
                        { type: 'string',min: 5, max:18, message: '名称不能为空 ', trigger: 'change' }
                    ],
                    password: [
                        { required: true,validator: validatePass, trigger: 'change' },
                        { type: 'string', min: 8, max:20,message: '密码不能为空', trigger: 'change' }
                    ],
                    nickname: [
                        { required: true,validator: validateNickname, trigger: 'change' },
                        { type: 'string', min: 1,max: 32, message: '昵称长度为1—32', trigger: 'change' }
                    ],
                    description:[
                        { max: 200, message: '说明不能超过200个字母 ', trigger: 'change' },
                    ],
                },
                // 获取所有的课件用户组
                allGroupList:[],
                // 课件用户组数据
                ExperimentalUserGroupList:[],
                ExperimentalUserGroupCol:[
                    // {
                    //     title: '操作',
                    //     key: 'action',
                    //     align: 'left',
                    //     width:350,
                    //     render:(h,params)=>{
                    //         return h('div',{
                    //             style: {
                    //                 'display': 'flex',
                    //                 'justify-content': 'flex-start',
                    //                 'align-items': 'center',
                    //             },
                    //         },[
                    //             h('a',{
                    //                 attrs:{
                    //                     disabled:this.isCanClick(params.row.creator),
                    //                 },
                    //                 style:{
                    //                     'display': 'flex',
                    //                     'justify-content': 'flex-start',
                    //                     'align-items': 'center',
                    //                     color:this.isCanClick(params.row.creator)?'':'#2f70ff'
                    //                 },
                    //             },[
                    //                 h('Poptip',
                    //                     {
                    //                         props: {
                    //                             confirm: true,
                    //                             transfer:true,
                    //                             title: '确定要解散这个实验组吗？'
                    //                         },
                    //                         on: {
                    //                             'on-ok': ()=>{
                    //                                 this.delGroup(params)
                    //                             },
                    //                             'on-cancel': ()=>{

                    //                             }
                    //                         }
                    //                     },
                    //                     [
                    //                         h('img', {
                    //                             attrs: {
                    //                                 src: this.isCanClick(params.row.creator)?require('../../assets/globalIcon/dis-disband.png'):require('../../assets/globalIcon/disband.png'),
                    //                             },
                    //                             style: {
                    //                                 cursor: 'pointer',
                    //                                 'margin-right':'5px',
                    //                                 'vertical-align': 'middle',
                    //                                 width:'16px',
                    //                                 height:'16px',
                    //                                 display:'inline-block',
                    //                                 marginBottom:'4px',
                    //                             },
                    //                         }),
                    //                         h('span',{
                    //                             style: {
                    //                                 cursor: 'pointer',
                    //                             },
                    //                         },'解散')
                    //                     ],),
                    //                 h('div',{
                    //                         style:{'margin-left':'20px'},
                    //                         on:{
                    //                             click:()=>{
                    //                                 this.madifyGroup(params.row)
                    //                             }
                    //                         }
                    //                     }, [
                    //                     h('img', {
                    //                         attrs: {
                    //                             src: this.isCanClick(params.row.creator)?require('../../assets/globalIcon/dis-modify2.png'):require('../../assets/globalIcon/modify.png'),
                    //                         },
                    //                         style: {
                    //                             cursor: 'pointer',
                    //                             'margin-right':'5px',
                    //                             'vertical-align': 'middle',
                    //                             width:'16px',
                    //                             height:'16px',
                    //                             display:'inline-block',
                    //                             marginBottom:'4px',
                    //                         },
                    //                     }),
                    //                     h('span',{
                    //                         style: {
                    //                             cursor: 'pointer',
                    //                         },
                    //                     },'修改')]),
                    //             ]),
                    //             h('a',{
                    //                 style:{
                    //                     'display': 'flex',
                    //                     'justify-content': 'flex-start',
                    //                     'align-items': 'center',
                    //                     color:'#2f70ff',
                    //                     'margin-left':'20px'
                    //                 },
                    //             },[
                    //                 h('div',{
                    //                     on:{
                    //                         click:()=>{
                    //                             this.createdInvitation(params)
                    //                         }
                    //                     },
                    //                 },[
                    //                         h('img', {
                    //                             attrs: {
                    //                                 src: require('../../assets/globalIcon/intvie.png'),
                    //                             },
                    //                             style: {
                    //                                 cursor: 'pointer',
                    //                                 'margin-right':'5px',
                    //                                 'vertical-align': 'middle',
                    //                                 width:'19px',
                    //                                 height:'16px',
                    //                                 display:'inline-block',
                    //                                 marginBottom:'4px',
                    //                             },
                    //                         }),
                    //                         h('span',{
                    //                             style: {
                    //                                 cursor: 'pointer',
                    //                             },
                    //                         },'邀请')]),
                    //                 h('div',{
                    //                         style:{'margin-left':'20px'},
                    //                         on:{
                    //                             click:()=>{
                    //                                 this.membersManage(params.row)
                    //                             }
                    //                         },
                    //                     }, [
                    //                         h('img', {
                    //                             attrs: {
                    //                                 src:require('../../assets/globalIcon/member.png'),
                    //                             },
                    //                             style: {
                    //                                 cursor: 'pointer',
                    //                                 'margin-right':'5px',
                    //                                 'vertical-align': 'middle',
                    //                                 width:'22px',
                    //                                 height:'16px',
                    //                                 display:'inline-block',
                    //                                 marginBottom:'4px',
                    //                             },
                    //                         }),
                    //                         h('span',{
                    //                             style: {
                    //                                 cursor: 'pointer',
                    //                             },
                    //                         },'成员管理')]),
                    //             ]),
                    //         ])
                    //     }
                    // }
                ],
                isCanClickReviceAndDelBtn:false,
                experGroupLoading:false,
                expGroupVisibility:'',
                filterExpGroup:'all',
                expGroupCount:0,
                expPage:1,
                expPageSize:12,
                expGroupName:'',
                searchExpGroupInput:'',
                // 创建/修改实验组
                groupText:'',
                isCreate:true,
                reGroupModal:false,
                loading:false,
                formItem:{
                    name:'',
                    visibility:'company',
                    description:'',
                },
                formItemRuleValidate: {
                    name: [
                        { required: true,validator: validateGroupname, trigger: 'change' },
                        { type: 'string',min: 1, max:32,  message: '请选择能见度', trigger: 'change' },
                    ],
                    visibility: [
                        { required: true, message: '请选择能见度 ', trigger: 'change' }
                    ],
                    description:[
                        { max: 200, message: '说明不能超过200个字母', trigger: 'change' },
                    ],
                },
                reGroupId:'',
                // 邀请码
                modal3:false,
                teamLink:{
                    name:'',
                },
                // 处理申请
                applyModal:false,
                applyGroupName:'',
                applyList:[],
                applyGroupCol:[
                    {
                        title:'序号',
                        type:'index',
                        width:60,
                        align:'left',
                    },
                    {
                        title:'用户名',
                        key:'userName',
                        align:'left',
                    },
                    {
                        title:'邀请人',
                        key:'inviterName',
                        align:'left',
                    },
                    {
                        title:'申请状态',
                        key:'status',
                        align:'left',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'left',
                        render:(h,params)=>{
                            return h('div',[
                                h('a',{
                                    style:{
                                        'display': 'flex',
                                        'justify-content': 'flex-start',
                                        'align-items': 'left',
                                        color:'rgb(82, 56, 144)'
                                    },
                                },[
                                    h('div',{
                                        on:{
                                            click:()=>{
                                                this.agreeApply(params)
                                            }
                                        }
                                    }, [
                                        h('img', {
                                            attrs: {
                                                src: require('../../assets/project/agree-h.png'),
                                            },
                                            style: {
                                                cursor: 'pointer',
                                                'margin-right':'5px',
                                                'vertical-align': 'middle',
                                                width:'22px',
                                                height:'22px',
                                                display:'inline-block',
                                                marginBottom:'4px',
                                            },
                                        }),
                                        h('span',{
                                            style: {
                                                cursor: 'pointer',
                                            },
                                        },'同意')]),
                                    h('div',{
                                        style:{'margin-left':'20px'},
                                        on:{
                                            click:()=>{
                                                this.refuseApply(params.row)
                                            }
                                        }
                                    }, [
                                        h('img', {
                                            attrs: {
                                                src: require('../../assets/project/refuse-h.png'),
                                            },
                                            style: {
                                                cursor: 'pointer',
                                                'margin-right':'5px',
                                                'vertical-align': 'middle',
                                                width:'22px',
                                                height:'22px',
                                                display:'inline-block',
                                                marginBottom:'4px',
                                            },
                                        }),
                                        h('span',{
                                            style: {
                                                cursor: 'pointer',
                                            },
                                        },'拒绝')]),
                                ]),
                            ])
                        }
                    }
                ],
                // 密码黑名单
                pwdBlackList:[],
                // 重置密码img
                // resetImg:require('../../assets/project/resetPwd-h.png'),
                invitaIcon:require('../../assets/project/invita-h.png'),
                memsIcon:require('../../assets/project/mems-h.png'),
                //修改昵称
                modifyNicknameModal:false,
                modifyNicknameForm:{
                	nickname:''
                },
                //导入报告
                uploadAction: "/api/identity/company/users/import",
                uploadGroupAction:"/api/identity/experimenterGroups/import",
				uploadHeader: {
					Authorization:localStorage.token,
					Accept:'*/*'
				},
				uploadList:[],
				uploaderror:false,
				filename:'',
				selectAllUser:false,
				selectUsers:[],
				selectAllGroup:false,
				selectGroups:[],
				//导入失败用户modal
				abnormalUserList:[],
				abnormalUserModal:false,
				abnormalUserCol:[
					{
                        title:'用户名',
                        key:'username',
                        align:'left',
                    },
                    {
                        title:'昵称',
                        key:'nickname',
                        align:'left',
                    },
                    {
                        title:'角色',
                        key:'role',
                        align:'left',
                    },
                    {
                        title:'类型',
                        key:'type',
                        align:'left',
                    },
                    {
                        title:'导入失败原因',
                        key:'message',
                        align:'left',
                    }
				],
                isRetainer:true,
            }
        },
        created(){
            // 获取用户id
            let November = sessionStorage.getItem('November')
            November = JSON.parse(encryption.SelfUseDecrypt(November))
            this.USER_ID = November.userId
            this.isRootDesigner = November.isRootDesigner
            this.userName = November.userName
            this.isRetainer = sessionStorage.getItem('isRetainer') === 'true'
            console.log('%c [ this.isRetainer ]', 'font-size:13px; background:pink; color:#bf2c9f;', this.isRetainer)
        },
        mounted(){
        	//赋值查询条件
        	let queryObj = sessionStorage.getItem('queryObj');
        	if(queryObj){
        		let params = JSON.parse(queryObj);
						this.expPage = params.pageIndex;
						this.expGroupVisibility = params.visibility;
						this.expGroupName = params.name;
        		sessionStorage.removeItem("queryObj");
        	}
            this.setStyle()
            $('.company-page .ivu-divider-horizontal').css({
                margin:0
            })
            window.onresize = () => {
                this.setStyle()
            }
//          let getPage = this.$route.query.page?parseInt(this.$route.query.page):1
//          this.expPage = getPage
            let designerMemberTitle = sessionStorage.getItem('designerMemberTitle')?sessionStorage.getItem('designerMemberTitle'):"company"
            if(designerMemberTitle === 'company'){
                this.allClassLine = true
                this.allClassText = true
                this.myClassText = false
                this.myClassLine = false
                this.getCompanyList()
            }else if(designerMemberTitle === 'group'){
                this.allClassLine = false
                this.allClassText = false
                this.myClassText = true
                this.myClassLine = true
                this.queryExperimentalUserGroup()
            }
            this.getGroupByCreatExper()
            // 查询密码黑名单
            this.queryPwdList()
            this.isRetainer = sessionStorage.getItem('isRetainer') === 'true'
            console.log('%c [ this.isRetainer ]', 'font-size:13px; background:pink; color:#bf2c9f;', this.isRetainer)
        },
        methods:{
            // 设置高度
            setStyle(){
                window.fullHeight = document.documentElement.clientHeight;
                window.fullWidth = document.documentElement.clientWidth;
                this.fullHeight = window.fullHeight;
                this.fullWidth = window.fullWidth;
                this.setTableHei = this.fullHeight - 197 +'px'
                let num = this.fullHeight - 197
                this.groupPageSize = Math.floor(num/96)
                this.expPageSize = Math.floor(num/96)
            },
            // 头部的切换
            clickClassText(type){
                if(type === 'all'){
                	sessionStorage.removeItem('queryObj')
                    this.allClassLine = true
                    this.allClassText = true
                    this.myClassText = false
                    this.myClassLine = false
                    sessionStorage.setItem('designerMemberTitle','company')
                    //this.getCompanyList()
                    this.refreshCompany()
                    this.getGroupByCreatExper()
                    this.selectUsers = [];
                }else if(type === 'my'){
                    this.allClassLine = false
                    this.allClassText = false
                    this.myClassText = true
                    this.myClassLine = true
                    sessionStorage.setItem('designerMemberTitle','group')
                    //this.queryExperimentalUserGroup()
                    this.refreshExpGroup();
                    this.selectGroups = [];
                }
            },
            // 查询密码黑名单
            queryPwdList(){
                getPwdBlackList()
                .then(res=>{
                    if(res.data.code === 1){
                        this.pwdBlackList = res.data.data
                    }
                })
                .catch(err=>{
                    console.log(err)
                })
            },
            // 单位人员列表
            getCompanyList(val){
                this.myUserTeamGroupLoading = true;
                let params = {
                    pageIndex:this.groupPage,
                    pageSize:this.groupPageSize,
                    order:'desc',
                    sortBy:'created',
                    nickname:this.nickname
                }
                if(this.searchComMemInput != ''){
                    params.username = this.searchComMemInput
                }
                if(this.userRole != ''){
                    params.role = this.userRole
                    params.type = `designer`
                }
                if(this.userType != ''){
                    params.type = this.userType
                }
                if(this.filterMyCreatExpMem === 'myExpMem'){
                    params.creator = this.USER_ID
                }
                getCompanyData(params)
                    .then(res=>{
                        if(res.data.code == 1){
                            let getData = res.data.data;
                            this.userGroupTotal = getData.total
                            let items = getData.items
                            this.userGroupList = items
							console.log(items);
                            if(items.length > 0){
                                this.showMembersData = true
                                this.showMembersImg = false
                            }else{
                                this.showMembersData = false
                                this.showMembersImg = true
                            }
                            if(val == "刷新"){
                                this.$Message.success({
                                    content:"刷新成功",
                                    duration: 3
                                })
                            }
                            this.userGroupList.forEach(user => {
                            	if(this.selectUsers.map(user=>user.id).includes(user.id)){
                            		this.$set(user,'_checked',true)
                            	}else{
                            		this.$set(user,'_checked',false)
                            	}
                            })
                            if(this.userGroupList.length > 0 && this.userGroupList.every(user => this.selectUsers.map(user=>user.id).includes(user.id))){
								this.selectAllUser = true;
							}else{
								this.selectAllUser = false;
							}
                        }else {
                            this.showMembersData = false
                            this.showMembersImg = true
                            this.userGroupTotal = 0
                            this.userGroupList = []
                        }
                        this.myUserTeamGroupLoading = false;
                    })
                    .catch(err=>{
                        this.showMembersData = false
                        this.showMembersImg = true
                        this.myUserTeamGroupLoading = false;
                        console.log(err)
                    })
            },
            // 过滤
            userGroupOnChange(val){
                this.groupPage = val
                this.getCompanyList()
            },
            searchComMem(val){
                this.groupPage = 1
                this.searchComMemInput = this.searchComMemInput
                this.getCompanyList()
            },
            changeUserType(type){
                this.groupPage = 1
                if(type === 'all'){
                    this.userRole = ''
                    this.userType = ''
                }else if(type === 'experimenter'){
                    this.userRole = ''
                    this.userType = type
                } else {
                    this.userRole = type
                    this.userType = ''
                }
                this.getCompanyList()
            },
            searchCreatedByMe(val){
                if(val){
                    this.filterMyCreatExpMem = 'myExpMem'
                }else {
                    this.filterMyCreatExpMem = 'all'
                }
                this.groupPage = 1
                this.getCompanyList()
            },
            // 设置按钮状态
            setDelCompanyMemBtnStatus(params){
                // 如果当前是单位管理员 或者该操作员创建者 则可退出
                if(this.isRootDesigner || this.USER_ID === params.row.creator){
                    // 将 单位管理员 和 type为manager管理员的按钮都禁掉
                    if(params.row.role === 'leader' || params.row.type === 'manager'){
                        return true
                    }else {
                        return false
                    }
                }else {
                    return true
                }
            },
            // 移除公司成员
            delGroupMember(params){
                let userid = params.id
                delCompanyMember(userid)
                    .then(res=>{
                        if(res.data.code === 1){
                            this.$Message.success('已移除该成员！')
                            this.checkSingleUser(false,params);
                            this.groupPage = (this.userGroupList.length == 1 && this.groupPage > 1) ? this.groupPage - 1 : this.groupPage;
                            this.getCompanyList()
                        }else {
                            this.$Message.error(res.data.message)
                        }
                    })
                    .catch(err=>{
                        console.log(err)
                        this.$Message.error('服务链接失败！')
                    })
            },
            changePass (Row){
                console.log(Row)
                
                this.userForm.id = Row.id
                this.showChangePass = true
            },
            // 提交新密码
            changePassword(name){
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let id = this.userForm.id
                        let params = {
                            password : this.newPassword.Password
                        }
                        if(this.newPassword =='' || this.newPassword.length < 6){
                            this.$Message.warning({
                            content: '请输入新密码且不低于八位!',
                            duration: 3
                            })
                            return false
                        }
                        changePassword(id,params).then((res) =>{
                            // console.log(res)
                            if(res.data.code == 1){
                            this.userForm.id = ''
                            this.newPassword.Password = ''
                            this.showChangePass = false
                            this.$Message.success({
                                content: '修改成功',
                                duration: 3
                            })
                            }
                        })
                    } else {
                        this.$Message.error('请重新输入!');
                    }
                })
            },
            // 重置成员密码
            resetPwd(params){
                let id = params.id
                resetPwd(id)
                    .then(res=>{
                        if(res.data.code === 1){
                            this.$Notice.success({
                                title: '重置成功',
                                render: h => {
                                    return h('span', [
                                        '重置后的密码为：',
                                        h('a', res.data.data),
                                    ])
                                },
                                duration: 0,
                            });
                        }else {
                            this.$Message.error({
                                content:res.data.message,
                                duration:3,
                            })
                        }
                    })
                    .catch(err=>{
                        console.log(err)
                    })
            },
            // 刷新单位
            refreshCompany(showTip){
                this.selectUsers = []//清空已经选择的人员
                this.groupPage = 1
                this.searchComMemInput = ''
                this.filterRootOrDesi = 'all'
                this.userRole = ''
                this.userType = ''
                this.nickname = ''
                this.filterMyCreatExpMem = 'all'
                this.createByMe = false
                if(showTip){
                	this.getCompanyList('刷新')
                }else{
                	this.getCompanyList();
                }
            },
            // 单位管理员创建
            creatDesignBtn(){
                this.rootCreatedExpMemberModal = true
                this.rootCreatedExpMemberModel.username = ''
                this.rootCreatedExpMemberModel.password = ''
                this.rootCreatedExpMemberModel.nickname = ''
                this.rootCreatedExpMemberModel.mobile = ''
                this.rootCreatedExpMemberModel.email = ''
                this.rootCreatedExpMemberModel.description = ''
            },
            rootCreatedExpMemberSubmit(name){
                this.$refs[name].validate((valid) => {
                    if (valid){
                        delete this.rootCreatedExpMemberModel.role
                        if(this.rootCreatedExpMemberModel.type === 'designer'){
                            this.rootCreatedExpMemberModel.role = 'member'
                        }
                        this.creatMemCommon(this.rootCreatedExpMemberModel)
                    } else {
                        this.$Message.error('请完善信息！');
                    }
                })
            },
            rootCreatedExpMemberReset(name){
                this.$refs[name].resetFields();
                this.showExpGroupSelect = false
                this.selectGroup = ''
            },
            changeCreatType(val){
                if(val === 'designer' || val === 'evaluator' || val === 'referee'){
                    this.showExpGroupSelect = false
                    this.selectGroup = ''
                }else if(val === 'experimenter'){
                    this.showExpGroupSelect = true
                }
            },
            // 单位设计师创建操作员
            creatGroupMemberBtn(){
                this.createdExpMemberModal = true
                this.createdExpMemberModel.description = ''
                this.createdExpMemberModel.email = ''
                this.createdExpMemberModel.mobile = ''
                this.createdExpMemberModel.nickname = ''
                this.createdExpMemberModel.password = ''
                this.createdExpMemberModel.username = ''
            },
            createdExpMemberSubmit(name){
                this.$refs[name].validate((valid) => {
                    if (valid){
                        this.creatMemCommon(this.createdExpMemberModel)
                    } else {
                        this.$Message.error('请完善信息！');
                    }
                })
            },
            createdExpMemberReset(name){
                this.$refs[name].resetFields();
            },
            // 创建者员公用接口
            creatMemCommon(val){
                if(this.pwdBlackList.indexOf(val.password) > -1){
                    this.$Message.info({
                        content:'该密码不可使用，请重新输入！',
                        duration:3,
                    })
                    return false
                }
                // 验证用户名是否重复
                verifyUserName(val.username)
                    .then(res=>{
                        if(res.data.code === 1){
                            if(res.data.data){
                                this.$Message.error({
                                    content:'该用户名已被使用！',
                                    duration:3,
                                })
                            }else {
                                this.realSubmitCreatMember(val)
                            }
                        }else {
                            this.$Message.error({
                                content:res.data.data,
                                duration:3,
                            })
                        }
                    })
                    .catch(err=>{
                        console.log(err)
                    })
            },
            realSubmitCreatMember(val){
                if(val.type === 'evaluator'){
                    val.type = 'designer'
                    val.role = 'evaluator'
                }else if(val.type === 'referee'){
                    val.type = 'designer'
                    val.role = 'referee'
                }else if(val.type === 'experimenter'){
                  val.role = 'tester'
                }
                let params = {}
                if(this.selectGroup != ''){
                    params.experimenterGroupId = this.selectGroup
                }
                createUser(params,val)
                    .then(res=>{
                        if(res.data.code == 1){
                            this.$Message.success('人员创建成功！')
                            this.createdExpMemberModal = false
                            this.rootCreatedExpMemberModal = false
                            //this.getCompanyList()
                            this.refreshCompany()
                        }else {
                            this.$Message.error({
                                content:res.data.message,
                                duration: 3
                            })
                        }
                    })
                    .catch(err=>{
                        console.log(err)
                        this.$Message.error('服务器连接失败！')
                    })
            },
            // 创建者员使用到的实验组 全部数据
            getGroupByCreatExper(){
                let params = {
                    pageIndex:1,
                    pageSize:2147483646,
                    visibility:'',
                    order:'desc',
                    sortBy:'created',
                }
                getExperiData(params)
                    .then((res)=>{
                        if(res.data.code == 1){
                            this.allGroupList = res.data.data.items;
                        }else {
                            this.allGroupList = []
                        }
                    })
                    .catch((err)=>{
                        console.log(err)
                    })
            },
            // 实验组列表
            queryExperimentalUserGroup(){
                let params = {
                    pageIndex:this.expPage,
                    pageSize:this.expPageSize,
                    visibility:this.expGroupVisibility,
                    name:this.expGroupName,
                    order:'desc',
                    sortBy:'created',
                }
                this.queryObj = JSON.stringify(params);
                this.experGroupLoading = true
                getExperiData(params)
                    .then((res)=>{
                        if(res.data.code == 1){
                            this.ExperimentalUserGroupList = res.data.data.items;
                            this.expGroupCount = res.data.data.total
                            let items = res.data.data.items
                            for(let i=0;i<items.length;i++){
                                items[i].dismissIcon = require('../../assets/project/dismiss-d.png')
                                items[i].modifyIcon = require('../../assets/project/modifys.png')
                                // items[i].invitaIcon = require('../../assets/project/invita-d.png')
                                // items[i].memsIcon = require('../../assets/project/mems-d.png')
                            }
                            this.userGroupList = items
                            if(items.length > 0){
                                this.showGroupData = true
                                this.showGroupImg = false
                            }else{
                                this.showGroupData = false
                                this.showGroupImg = true
                            }
                            this.ExperimentalUserGroupList.forEach(group => {
                            	if(this.selectGroups.map(group => group.id).includes(group.id)){
                            		this.$set(group,'_checked',true)
                            	}else{
                            		this.$set(group,'_checked',false)
                            	}
                            })
                            if(this.ExperimentalUserGroupList.length > 0 && this.ExperimentalUserGroupList.every(group => this.selectGroups.map(group => group.id).includes(group.id))){
								this.selectAllGroup = true;
							}else{
								this.selectAllGroup = false;
							}
                        }else {
                            this.showGroupData = false
                            this.showGroupImg = true
                            this.expGroupCount = 0
                            this.ExperimentalUserGroupList = []
                        }
                        this.experGroupLoading = false
                    })
                    .catch((err)=>{
                        this.experGroupLoading = false
                        this.showGroupData = false
                        this.showGroupImg = true
                        console.log(err)
                    })
            },
            // 过滤
            expGroupOnChange(val){
                this.expPage = val
                this.queryExperimentalUserGroup()
            },
            searchExpGroup(val){
                this.expPage = 1
                val = this.searchExpGroupInput
                this.expGroupName = val
                this.queryExperimentalUserGroup()
            },
            changeExpGroupState(val){
                this.expPage = 1
                if(val === 'all'){
                    this.expGroupVisibility = ''
                }else {
                    this.expGroupVisibility = val
                }
                this.queryExperimentalUserGroup()
            },
            refreshExpGroup(){
                this.selectGroups = []//清空
                this.expPage = 1
                this.filterExpGroup = 'all'
                this.expGroupVisibility = ''
                this.expGroupName = ''
                this.searchExpGroupInput = ''
                this.queryExperimentalUserGroup()
            },
            isCanClick(creator){
                if(this.isRootDesigner || this.USER_ID === creator){
                    return false
                }else {
                    return true
                }
            },
            // 创建实验组
            creatGroupBtn(){
                this.isCreate = true
                this.reGroupModal = true
                this.groupText = '创建实验组'
                this.formItem.name = ''
                this.formItem.visibility = 'share'
                this.formItem.description = ''
            },
            // 修改实验组
            madifyGroup(row){
                this.isCreate = false
                this.reGroupModal = true
                this.groupText = '修改实验组'
                this.reGroupId = row.id
                this.formItem.name = row.name
                this.formItem.visibility = row.visibility
                this.formItem.description = row.description
            },
            // 创建/修改
            formBtn(name){
                if(this.isCreate){
                    this.exGroupHandleSubmit(name)
                }else {
                    this.reGroupSubmit(name)
                }
            },
            exGroupHandleSubmit(name){  // 创建
                this.$refs[name].validate((valid) => {
                    if (valid){
                        this.loading = true
                        creatGroup(this.formItem)
                            .then(res=>{
                                if(res.data.code == 1){
                                    this.$Message.success('创建成功！')
                                    this.reGroupModal = false
                                    //this.queryExperimentalUserGroup()
                                    this.refreshExpGroup()
                                }else {
                                    this.$Message.error(res.data.message)
                                }
                                this.loading = false
                            })
                            .catch(err=>{
                                this.loading = false
                                console.log(err)
                                this.$Message.error('服务器连接失败！')
                            })
                    } else {
                        this.$Message.error('请完善信息！');
                    }
                })
            },
            reGroupSubmit(name){
                this.$refs[name].validate((valid) => {
                    if (valid){
                        this.loading = true
                        reGroup(this.reGroupId,this.formItem)
                            .then(res=>{
                                if(res.data.code == 1){
                                    this.$Message.success('修改成功!')
                                    this.reGroupModal = false
                                    this.queryExperimentalUserGroup()
                                }else {
                                    this.$Message.error(res.data.message)
                                }
                                this.loading = false
                            })
                            .catch(err=>{
                                this.loading = false
                                console.log(err)
                            })
                    } else {
                        this.$Message.error('请完善信息！');
                    }
                })
            },
            exGroupHandleReset(name){
                this.$refs[name].resetFields();
            },
            // 解散
            delGroup(params){
                delGroup(params.id)
                    .then(res=>{
                        if(res.data.code == 1){
                            this.$Message.success({
                                content:'删除成功！',
                                duration:3,
                            })
                            this.checkSingleGroup(false,params);
                            this.expPage = (this.ExperimentalUserGroupList.length == 1 && this.expPage > 1) ? this.expPage - 1 : this.expPage;
                            this.queryExperimentalUserGroup()
                        }else {
                            this.$Message.error('删除失败！')
                        }
                    })
                    .catch(err=>{
                        console.log(err)
                    })
            },
            // 成员管理
            membersManage(row){
            	  sessionStorage.setItem('queryObj',this.queryObj);
                this.$router.push({
                    name: 'creatGroup',
                    query:{
                        id:row.id,
                        name:row.name,
                        page:this.expPage,
                    }
                })
            },
            // 创建邀请
            createdInvitation(params){
                let groupId = params.id
                let formData = {}
                this.modal3 = true
                creatInvaita(groupId,formData)
                    .then(res=>{
                        if(res.data.code == 1){
                            let data = res.data.data;
                            this.teamLink.name = `expGroupId=${data.experimenterGroupId}&token=${data.token}`
                        }else {
                            this.$Message.error('创建课件用户组分享码失败！')
                        }
                    })
                    .catch(err=>{
                        console.log(err)
                        this.$Message.error('服务器连接失败！')
                    })
            },
            // 点击复制链接
            copyTeamLink() {
                var input = $('#input_url');
                input.select();
                document.execCommand("Copy");
                this.$Message.success({
                    content:"复制成功",
                    duration:3,
                });
                this.modal3 = false;
            },
            // 查看申请人
            showApplyList(row){
                if(row.applyCount>0){
                    this.applyGroupName = row.name
                    this.applyList = []
                    this.applyModal = true
                    this.checkApplyData(row.id)
                }
            },
            checkApplyData(id){
                checkApply(id)
                    .then(res=>{
                        if(res.data.code === 1){
                            console.log(res)
                            this.applyList = res.data.data
                        }
                    })
                    .catch(err=>{
                        console.log(err)
                    })
            },
            closeDistribution(){
                this.applyModal = false
            },
            // 同意申请
            agreeApply(params){
                let json = {
                    applyId:params.row.id,
                    groupId:params.row.experimenterGroupId,
                    data:{}
                }
                agreeApply(json)
                    .then(res=>{
                        if(res.data.code == 1){
                            this.applyModal = false
                            this.queryExperimentalUserGroup()
                            this.$Message.success({
                                content: `已同意${res.data.data.userName}加入课件用户组${this.applyGroupName}`,
                                duration: 3,
                            });
                            this.sendToUser(params.row,'agree');
                        }
                    })
                    .catch(err=>{
                        console.log(err)
                    })
            },
            // 拒绝申请
            refuseApply(row){
                let params = {
                    groupId:row.experimenterGroupId,
                    applyId:row.id
                }
                refuseApply(params)
                    .then(res=>{
                        if(res.data.code == 1){
                            this.applyModal = false
                            this.queryExperimentalUserGroup()
                            this.$Message.info({
                                content:'已拒绝加入',
                                duration:3
                            })
                            this.sendToUser(row,'refuse');
                        }
                    })
                    .catch(err=>{
                        console.log(err)
                    })
            },
            // 计算成员列表index
            handleMemIndex(key){
                return (this.groupPage-1)*this.groupPageSize + key + 1
            },
            handleGroupIndex(key){
                return (this.expPage-1)*this.expPageSize + key + 1
            },
            // 是否在线
            isOnline(val){
                let text = ''
                let color = ''
                let obj = {}
                if(val){
                    text = '是'
                    color = '#90EE90'
                }else{
                    text = '否'
                }
                obj.text = text
                obj.color = color
                return obj
            },
            // 设置可见范围
            setVisibility(val){
                let obj = {}
                let text = ''
                let color = ''
                if(val === 'share'){
                    text = '单位'
                    color = '#32CD32'
                }else if(val === 'private'){
                    text = '个人'
                    color = '#FFA500'
                }
                obj.text = text
                obj.color = color
                return obj
            },
            handleApplyStyle(val){
                if(val > 0){
                    return {
                        height:'18px',
                        'line-height':'18px',
                        'text-align':'center',
                        'background-color':'rgb(47, 112, 255)',
                        color:'#fff',
                        'border-radius': '7px',
                        'cursor': 'pointer',
                        padding:'0 10px'
                    }
                }
            },
            // 是否可以删除
            setIsClick(item){
                if((item.creator !== this.USER_ID && !this.isRootDesigner) || item.role === 'leader'){
                    return {'pointer-events':'none'}
                }
            },
            setImgSrc(item){
                if(item.creator !== this.USER_ID && !this.isRootDesigner){
                    return require('../../assets/project/modifys.png')
                }else{
                    return require('../../assets/project/modifys-h.png')
                }
            },
            setDelImgSrc(item){
                if((item.creator !== this.USER_ID && !this.isRootDesigner) || item.role === 'leader'){
                    return require('../../assets/project/delNote-d.png')
                }else{
                    return require('../../assets/project/delNote-h.png')
                }
            },
            resetResetImg(item){
                if((item.creator !== this.USER_ID && !this.isRootDesigner) || item.role === 'leader'){
                    return require('../../assets/project/resetPwd-d.png')
                }else{
                    return require('../../assets/project/resetPwd-h.png')
                }
            },
            // 处理人员类型
            handleUserType(item){
                if(item.type === 'designer' && item.role === 'leader'){
                    return '单位管理员'
                }else if(item.type === 'designer' && item.role === 'member'){
                    return '单位设计师'
                }else if(item.type === 'experimenter' && item.role === 'tester'){
                    return '操作员'
                }else if(item.type === 'designer' && item.role === 'referee'){
                    return '裁判'
                }
            },
            //修改昵称（liqing-2020-09-02）
            reNickname(){
            	this.$refs['modifyNicknameForm'].validate((valid) => {
                    if (valid){
                    	modifyCompanyUserInfo(this.modifyNicknameForm.id,{nickname:this.modifyNicknameForm.nickname}).then((res)=>{
	                        if(res.data.code == 1){
	                            this.$Message.success({
	                                content:'修改成功！',
	                                duration:3,
	                            });
	                            this.getCompanyList();
	                            this.modifyNicknameModal = false;
	                        }else{
	                        	this.$Message.error(data.message);
	                        }
	                    }).catch((err)=>{
	                        this.$Message.error('修改失败');
	                    })
                    }else{
                    	this.$Message.error('修改失败');
                    }
               })
            },
            //设置修改昵称图标（liqing-2020-09-02）
            setModifyNicknameImgSrc(item){
                if((item.creator !== this.USER_ID && !this.isRootDesigner) || item.role === 'leader'){
                    return require('../../assets/project/modifys.png')
                }else{
                    return require('../../assets/project/modifys-h.png')
                }
            },
            // 设置修改昵称是否可点击（liqing-2020-09-02）
            setIsClickModify(item){
                if((item.creator !== this.USER_ID && !this.isRootDesigner) || item.role === 'leader'){
                    return {'pointer-events':'none'}
                }
              
            },
            //显示修改昵称modal（liqing-2020-09-02）
            modifyNicknameBtn(item){
            	this.modifyNicknameModal = true;
            	this.modifyNicknameForm.id = item.id;
            	this.modifyNicknameForm.nickname = item.nickname;
            },
            //导入用户（liqing-2020-10-20）
            handleFormatError(){
        		this.$Message.warning('文件格式错误');
      		},
			handleBeforeUpload(file){
				this.uploadList = this.$refs.upload.fileList;
				return true;
			},
			handleProgress(event, file, fileList){

			},
			getImageUrl(res){
				if(res.code == 1){
					if(this.myClassText){
						this.$Message.info('导入成功');
						this.queryExperimentalUserGroup();
					}else if(this.allClassText){
						if(res.data.failedList.length > 0){
							this.abnormalUserList = res.data.failedList;
							this.abnormalUserModal = true;
						}else{
							this.$Message.info('导入成功');
						}
						this.getCompanyList();
					}
				}else{
					this.$Message.warning(res.message);
				}
				this.uploadList = [];
			},
            isDeleteList(){
                let ids = this.selectUsers.map(user => user.id).join(',');
                if(ids.length === 0){
                    this.$Message.error('请选择需要删除的单位人员！')
                    return false
                }
            },
            // 批量删除单位人员
            deleteList(){
                let ids = this.selectUsers.map(user => user.id).join(',');
                deleteListUser(ids).then((res) =>{
                    if(res.data.code == 1){
                            this.selectUsers = []
                            this.$Message.success({
                                content:'删除成功！',
                                duration:3,
                            })
                            this.groupPage = (this.userGroupList.length == this.selectUsers.length && this.groupPage > 1) ? this.groupPage - 1 : this.groupPage;
                            this.getCompanyList()
                        }else {
                            this.$Message.error('删除失败！')
                        }
                })

            },
            isDdeleteGroups(){
                let ids = this.selectGroups.map(user => user.id).join(',');
                if(ids.length === 0){
                    this.$Message.error('请选择需要删除的实验组！')
                    return
                }
            },
            //批量删除实验组
            deleteGroups(){
                let ids = this.selectGroups.map(user => user.id).join(',');
                deleteGroups(ids).then((res) =>{
                    if(res.data.code == 1){
                            this.selectGroups = []
                            this.$Message.success({
                                content:'删除成功！',
                                duration:3,
                            })
                            this.expPage = (this.ExperimentalUserGroupList.length == this.selectGroups.length && this.expPage > 1) ? this.expPage - 1 : this.expPage;
                            this.queryExperimentalUserGroup()
                        }else {
                            this.$Message.error('删除失败！')
                        }
                })
            },
			exportUsers(){
		    	let ids = this.selectUsers.map(user => user.id);
		    	if(ids.length == 0){
		    		this.$Message.warning('请选择用户');
		    		return
		    	}
		    	exportUsers({ids}).then(data => {
		    		if(!data.code){
		                const downloadElement = document.createElement("a");
		                const href = window.URL.createObjectURL(data.data);
		                downloadElement.href = href;
		                downloadElement.download = '用户.xlsx';
		                document.body.appendChild(downloadElement);
		                downloadElement.click();
		                document.body.removeChild(downloadElement); // 下载完成移除元素
		                window.URL.revokeObjectURL(href); // 释放掉blob对象
		                this.selectGroups = [];
		    		}else{
		    			this.$Message.error('导出用户失败');
		    		}
		    	}).catch(error => {
		    		this.$Message.error('导出用户失败!');
		    	})
			},
			handleCheckAllUser(e){
				this.selectAllUser = e;
				this.userGroupList.forEach(user => {
					this.checkSingleUser(e,user);
				})
			},
			checkSingleUser(e,user){
				if(e && !this.selectUsers.map(user => user.id).includes(user.id)){
			    	this.selectUsers.push(user);
			    }else if(!e && this.selectUsers.map(user => user.id).includes(user.id)){
			    	let index = this.selectUsers.findIndex(item => user.id == item.id);
			    	this.selectUsers.splice(index,1);
			    }
				this.$set(user,'_checked',e);
				if(this.userGroupList.length > 0 && this.userGroupList.every(user => user._checked === true)){
					this.selectAllUser = true;
				}else{
					this.selectAllUser = false;
				}
			},
			exportGroups(){
		    	let ids = this.selectGroups.map(group => group.id);
		    	if(ids.length == 0){
		    		this.$Message.warning('请选择实验组');
		    		return
		    	}
		    	exportGroups({ids}).then(data => {
		    		if(!data.code){
		                const downloadElement = document.createElement("a");
		                const href = window.URL.createObjectURL(data.data);
		                downloadElement.href = href;
		                downloadElement.download = '实验组.xlsx';
		                document.body.appendChild(downloadElement);
		                downloadElement.click();
		                document.body.removeChild(downloadElement); // 下载完成移除元素
		                window.URL.revokeObjectURL(href); // 释放掉blob对象
		                this.selectUsers = [];
		    		}else{
		    			this.$Message.error('导出用户失败');
		    		}
		    	}).catch(error => {
		    		this.$Message.error('导出用户失败!');
		    	})
			},
			handleCheckAllGroup(e){
				this.selectAllGroup = e;
				this.ExperimentalUserGroupList.forEach(group => {
					this.checkSingleGroup(e,group);
				})
			},
			checkSingleGroup(e,group){
				if(e && !this.selectGroups.map(group => group.id).includes(group.id)){
			    	this.selectGroups.push(group);
			    }else if(!e && this.selectGroups.map(group => group.id).includes(group.id)){
			    	let index = this.selectGroups.findIndex(item => group.id == item.id);
			    	this.selectGroups.splice(index,1);
			    }
				this.$set(group,'_checked',e);
				if(this.ExperimentalUserGroupList.length > 0 && this.ExperimentalUserGroupList.every(group => group._checked === true)){
					this.selectAllGroup = true;
				}else{
					this.selectAllGroup = false;
				}
			},
			//发送公告
            sendToUser(row,type){
				let params = {
					"content": type == "agree" ? `[${this.userName}]已同意你加入实验组[${this.applyGroupName}]`: `[${this.userName}]已拒绝你加入实验组[${this.applyGroupName}]`,
					"id": "",
					"status": 0,
					"title": "",
					"type": 1,
					"users": [
					    {
					      "userIds": [row.userId]
					    }
					]
				}
				sendToUser(params).then(data => {
					if(data.code==1){
						//this.$Message.info('发送成功');
					}else{
						//this.$Message.error(data.message);
						setTimeout(() => {
							this.sendToUser(row,type);
						},2000)
					}
				}).catch(error => {
					console.log(error);
					//this.$Message.error("公告发送失败");
				})
			},
        }
    }
</script>
<style scoped>
    .page-wrap{
        padding: 30px;
        height: 100%;
    }
    .page-content{
        background-color: #fff;
        border-radius: 10px;
        height: 100%;
    }
    .img-header{
        display: flex;
        justify-content: space-between;
        padding: 20px 20px 0 20px;
        width: 100%;
    }
    .member-filter-wrap{
        display: flex;
        justify-content: flex-end;
        width: calc(100% - 188px);
        padding-left: 10px;
    }
    .class-title-wrap{
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .class-title{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .class-title-all{
        font-size: 16px;
        cursor: pointer;
        color: var(--default-color-level2);
    }
    .active{
        color: var(--default-color);
        font-size: 22px;
        font-weight: 600;
    }
    .class-title-line{
        background-color: #fff;
        height: 3px;
        border-radius: 1px;
        width: 50px;
        margin: 20px 0 3px 0;
    }
    .line-active{
        background-color: var(--default-color);;
    }
    .table-wrap{
        height: calc(100vh - 135px);
    }
    .deviceDrawer{
        position: relative;
    }

    /* 新样式 */
	.content-wrap{
		max-height: calc(100vh - 197px);
        width: 100%;
        font-size: 14px;
        overflow-x: hidden;
        overflow-y: auto;
		margin-top: 20px;
        padding: 0 20px;
    }
    .content-wrap::-webkit-scrollbar{
        /*滚动条整体样式*/
        width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 4px;
    }
    .content-wrap::-webkit-scrollbar-thumb {
        /*滚动条里面小方块样式*/
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: rgba(209, 209, 209,0.6);
    }
    .content-wrap::-webkit-scrollbar-track{
        /*滚动条里面轨道样式*/
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 5px;
        background: rgba(179, 179, 179, 0.1);
    }
    .project-item{
        width: 100%;
        border-radius: 4px;
        border: 2px solid rgb(231, 231, 241);
        padding: 10px 15px;
        margin-bottom: 15px;
    }
    .item-first-line{
        display: flex;
        justify-content: space-between;
    }
    .project-name-state{
        display: flex;
        justify-content: flex-start;
        align-items:center;
    }
    .project-name-state-checkbox {
        margin-top: -6px;
    }
    .project-name{
        font-size: 16px;
        font-weight: 600;
        max-width: 400px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
    }
    .project-status-text{
        font-weight: 600;
        font-size: 14px;
		display: flex;
		justify-content: flex-start;
    }
    .btn-icon-wrap{
        display: flex;
        justify-content: flex-end;
    }
    .click-icon{
        cursor: pointer;
        height: 22px;
        margin-left: 20px;
    }
    .project-other-info{
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-top: 8px;
        color: rgba(51, 51, 51,0.4);
        font-weight: bold;
    }
	.sendMsgContent{
		display: flex;
		justify-content: flex-start;
		margin-left: 15px;
		white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
		width: calc(100vh - 300px);
	}
    .setname{
        cursor: pointer;
        /* position: absolute; */
        font-size: 16px;
        font-weight: bold;
        /* left: 100px;
        top: 2px; */
    }
	/* 省略图 */
    .defGraphWrap{
        width: 100%;
        height: calc(100vh - 120px);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .defGraph{
        height: 126px;
        width: 157px;
        background: url("../../assets/globalIcon/defGraph.png") no-repeat center center;
        background-size: 157px 126px;
    }
    .graphText{
        color: #888;
        font-size: 14px;
        text-align: center;
        margin-top: 20px;
    }
    .downloadUrl{
    	color:#a5a5c6;
    }
    .downloadUrl:hover{
    	color:rgb(91,54,194);
    }
</style>
<style>
    .deviceDrawer .ivu-drawer-body{
        overflow: inherit;
    }
</style>
